/**
 * Created by wuyunan on 2017/5/19.
 */
import React from "react";

import PropTypes from "prop-types";
import {
  StyleSheet, Text, TouchableOpacity, View, Image,
} from "react-native";
import {
  Color, FontSize, ScreenWidth, scale,
} from "../../common/index";

const AddressItem = props => {
  const {
    onSetDefaultPress, onDeletePress, onEditPress, style, name, mobile, address, isDefault,
  } = props;

  const jmMobile = `${mobile.substr(0, 3)}****${mobile.substr(7)}`;

  return (
    <View style={[styles.container, style]}>
      <View style={styles.contentConatiner}>
        <View style={styles.row}>
          <Text style={styles.textName}>{name}</Text>
          <Text style={styles.textMobile}>{jmMobile}</Text>
        </View>
        <Text style={styles.textAddress}>{address}</Text>
      </View>
      <View style={styles.divider} />
      <View style={styles.rowConatiner}>
        <TouchableOpacity onPress={isDefault ? () => {} : onSetDefaultPress} style={styles.row}>
          <Image source={isDefault ? require("../../img/ic_selected.png") : require("../../img/ic_unselected.png")} />
          <Text style={isDefault ? styles.btnTextS : styles.btnText}>默认地址</Text>
        </TouchableOpacity>
        <View style={styles.subRowConatiner}>
          <TouchableOpacity onPress={onDeletePress} style={styles.row}>
            <Image source={require("../../img/ic_delete.png")} />
            <Text style={styles.btnText}>删除</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={onEditPress} style={[styles.row, { marginLeft: scale * 22 }]}>
            <Image source={require("../../img/ic_edit.png")} />
            <Text style={styles.btnText}>编辑</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};
AddressItem.defaultProps = {
  onSetDefaultPress: () => {},
  onDeletePress: () => {},
  onEditPress: () => {},
  isDefault: false,
};
AddressItem.propsTypes = {
  name: PropTypes.string.isRequired,
  mobile: PropTypes.string.isRequired,
  address: PropTypes.string.isRequired,
  onSetDefaultPress: PropTypes.func,
  isDefault: PropTypes.bool,
  onEditPress: PropTypes.func,
  onDeletePress: PropTypes.func,
};

const styles = StyleSheet.create({
  container: {
    width: ScreenWidth - 32 * scale,
    marginLeft: 16 * scale,
    height: scale * 140,
    paddingHorizontal: scale * 24,
    backgroundColor: Color.white,
    elevation: 2,
    shadowOffset: { height: 1 },
    shadowColor: Color.black,
    shadowOpacity: 0.1,
    marginTop: scale * 20,
  },
  contentConatiner: {
    flex: 1,
    paddingTop: scale * 16,
  },
  rowConatiner: {
    height: scale * 50,
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  subRowConatiner: {
    height: scale * 50,
    alignItems: "center",
    flexDirection: "row",
  },
  row: {
    alignItems: "center",
    flexDirection: "row",
  },
  text_title: {
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
  },
  text_desc: {
    color: Color.text_assist,
    fontSize: FontSize.SIZE_12,
  },
  btnText: {
    color: Color.text_desc,
    fontSize: FontSize.SIZE_14,
    marginLeft: scale * 6,
  },
  btnTextS: {
    color: Color.tab_yellow,
    fontSize: FontSize.SIZE_14,
    marginLeft: scale * 6,
  },
  textName: {
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
  },
  textMobile: {
    color: Color.text_assist,
    fontSize: FontSize.SIZE_14,
    marginLeft: scale * 8,
  },
  textAddress: {
    marginTop: scale * 10,
    color: Color.text_desc,
    fontSize: FontSize.SIZE_14,
  },
  divider: {
    backgroundColor: Color.divider_secondary,
    width: ScreenWidth - scale * 80,
    height: StyleSheet.hairlineWidth,
  },
});
export default AddressItem;
